﻿<%@ Page Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="CalendarButton.aspx.cs" Inherits="YUIAspNetDemo.Button.CalendarButton" Title="Untitled Page" %>

<%@ Register Src="~/Button/UserControls/CalendarButton.ascx" TagName="CalendarButton" TagPrefix="yuiUC" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : Button : Calendar Button</title>
      
    <script type="text/javascript">
        function DateChangeMenu(sender, args)
        {
            //get a refence to the button...
            var btn = $find('<%= calButtonMenu.Button.ClientID %>');
            UpdateDateDisplay(btn, args.date, sender._format);            
        }
                
        function DateChangeSplit(sender, args)
        {
        
            var btn = $find('<%= calButtonSplit.Button.ClientID %>');
            UpdateDateDisplay(btn, args.date, sender._format);    
        }
        
        function UpdateDateDisplay(btn, date, dateFormat)
        {
            btn.get_YUIControl().set("label", date.localeFormat(dateFormat));
            
            //hide the overlay on date selected.
            btn.get_Overlay().hide();
        }
    </script>
    
    <style type="text/css">
        /*fix in IE, display drop-down calendar container on top of second button*/
        .yui-overlay {z-index:1}
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Calendar button</h1>
    
    <p>The Calendar button control is a combination between the menu/split button and color picker.</p>
    
    <p>It allows easy and compact input for choosing a color.</p>
    
    <h1>Color picker in menu button</h1>
    <p>
        <yuiUC:CalendarButton ID="calButtonMenu" OnDateChange="DateChangeMenu" runat="server" />
    </p>
    
    <h1>Color picker in split button</h1>
    <p>
        <yuiUC:CalendarButton ID="calButtonSplit" OnDateChange="DateChangeSplit" ButtonType="Split" runat="server" />
    </p>
</asp:Content>